<template>
  <el-dialog v-model="visible" :title="title" destroy-on-close @closed="onClosed">
    <div class="player-wrap">
      <video class="prism-player" id="videoElement"></video>
    </div>
    <div class="player-list-wrap" v-if="!loading">
      <template v-if="isAudit">
        <div :class="{active:'roomLiveAddressWbc' === currentVideoIndex}"  @click="onChangeVideo('roomLiveAddressWbc')">审核画面</div>
      </template>
      <template v-else>
        <div :class="{active:'roomLiveAddressHdmi' === currentVideoIndex}" @click="onChangeVideo('roomLiveAddressHdmi')">课件画面</div>
        <div :class="{active:'roomLiveAddressTea' === currentVideoIndex}" @click="onChangeVideo('roomLiveAddressTea')">老师画面</div>
        <div :class="{active:'roomLiveAddressStu' === currentVideoIndex}" @click="onChangeVideo('roomLiveAddressStu')">学生画面</div>
        <div :class="{active:'roomLiveAddressTeaclose' === currentVideoIndex}" @click="onChangeVideo('roomLiveAddressTeaclose')">老师近景画面</div>
        <div :class="{active:'roomLiveAddressStuclose' === currentVideoIndex}" @click="onChangeVideo('roomLiveAddressStuclose')">学生近景画面</div>
      </template>
    </div>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import EsAjax from "@/utils/EsAjax";
import Apis from "@/apis";
import {ElMessage} from "element-plus";
import flvjs from 'flv.js';
const loading = ref(false)
const visible = ref(false)
const title = ref('')
const recordBoxInfo = ref({})
const currentVideoIndex = ref('')
const isVideoError = ref(false)
const isAudit = ref(false)
const onClosed = ()=>{
  recordBoxInfo.value = {}
}

const getList = (ip,id) => {
  // return 742
  loading.value = true
  EsAjax.post(Apis.recordboxList, {recordingIp: ip,id}).then((res) => {
    recordBoxInfo.value = res.data.data.list[0]||{}
    if(isAudit.value){
      currentVideoIndex.value = 'roomLiveAddressWbc'

      initPlayer(recordBoxInfo.value['roomLiveAddressWbc'])
    }else{
      currentVideoIndex.value = 'roomLiveAddressHdmi'
      initPlayer(recordBoxInfo.value['roomLiveAddressHdmi'])
    }
  }).finally(() => {
    loading.value = false
  })
}
const onChangeVideo = (e) => {
  currentVideoIndex.value = e
  initPlayer(recordBoxInfo.value[e])

}
const onError = (e) => {
  console.log(e)
  isVideoError.value = true
}

const show = (row, is,tit = '直播查看') => {
  if(row){
    visible.value = true
    title.value = tit
    isAudit.value = is || false
     getList(row.recordIp,row.id)
  }else{
    ElMessage.error('暂无直播资源')
  }
}


const initPlayer = (url)=>{
  console.log(url)
  if (flvjs.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: url
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
  }
}
// onMounted(()=>{
//   getList('192.168.10.169')
// })


defineExpose({
  show
})
</script>
<style >
.player-wrap{
  min-height: 500px;
}
.player-list-wrap{
  //background-color: #fff;
  display: flex;
  padding: 12px 0 ;
  >div{
    display: flex;
    padding: 4px 14px;
    background-color: #00A2CC;
    color:#fff;
    cursor: pointer;
    &.active{
      background-color: #00728d;
      display: flex;
      justify-content: center;
      align-items: center;
      &:before{
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #00ff80;
        box-shadow: 0 0 9px #00ff80;
        margin-right: 8px;
        border-radius: 8px;
      }
    }
  }
  >div+div{
   margin-left: 14px;
  }
}
</style>
